<template>
  <div id="" style="height:96vh; overflow-y:scroll;">
    <headerbox :headerTitle="'活动'" :hasBack='true' :headerRightTxt="'发布'" @headerRightEvent="headerRightEvent"></headerbox>
    <div class="acBackgrounImg" :style="{backgroundImage:'url('+require('@/assets/activityImage/add_photo1.png')+')'}">
      <img :src="imgUrlLink(matchInfo.themeIcon)" alt="" width="100%" height="100%">
      <input type="file" name="" value="" class="uploadIpt" @change='add_img'>
    </div>
    <ul class="formList mb10">
      <li>
        <span>活动主题</span>
        <input type="text" name="" v-model="matchInfo.title" placeholder="请输入活动主题">
      </li>
      <li @click="enrollBeginTime">
        <span>报名开始</span>
        <input type="text" name="" v-model="matchInfo.enrollBegin" placeholder="请选择开始日期">
      </li>
      <li @click="enrollEndTime">
        <span>报名截止</span>
        <input type="text" name="" v-model="matchInfo.enrollEnd" placeholder="请选择截止日期">
      </li>
      <li @click="startBeginTime">
        <span>活动开始</span>
        <input type="text" name="" v-model="matchInfo.startBegin" readonly placeholder="请选择开始日期">
      </li>
      <li @click="startEndTime">
        <span>活动结束</span>
        <input type="text" name="" v-model="matchInfo.startEnd" placeholder="请选择结束日期">
      </li>
    </ul>
    <ul class="formList mb10">
      <li>
        <span>活动描述</span>
        <textarea name="" rows="5" placeholder="请输入活动描述" v-model="matchInfo.describe_"></textarea>
      </li>
      <li>
        <span>活动人数</span>
        <input type="text" name="" v-model="matchInfo.activityNo" placeholder="请输入活动人数">
      </li>
      <li @click="addressMap">
        <span>活动地址</span>
        <input type="text" name="" v-model="matchInfo.activityAddr" readonly placeholder="请输入活动地址">
      </li>
      <li>
        <span>费用(元/人)</span>
        <input type="text" name="" v-model="matchInfo.cost" placeholder="请输入活动费用">
      </li>
      <li @click="classify">
        <span>运动类型</span>
        <input type="text" name="" v-model="classifyValue.classifyName" readonly placeholder="请选择运动类型">
      </li>

    </ul>

    <!-- 活动时间 -->
    <mt-datetime-picker
      v-model="pickerValue"
      ref="picker"
      type="date"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value} 日"
      :startDate="startDate"
      @confirm="dateConfirm">
    </mt-datetime-picker>
    <!-- 运动类型picker -->
    <mt-popup
      v-model="classifyVisible"
      position="bottom" style="width:100%;">
      <mt-picker :slots="classifySlots" :valueKey="'classifyName'" @change="onClassifyChange"></mt-picker>
    </mt-popup>
  </div>
</template>
<script>
import {getClassifyList,matchPush} from '@/utils/ajaxRequest.js';
import {dateChangeTime} from '@/utils/util.js';
import {mapState,mapMutations} from 'vuex';
export default {
  name: "",
  data: () => ({
    imgData: {
      accept: 'image/gif, image/jpeg, image/png, image/jpg',
    },
    name:'',
    matchInfo:{
      themeIcon:'',   //封面图片
      title:'',        //说明文字
      proType:'',     //活动类型
      enrollBegin:'',   //报名开始时间
      enrollEnd:'',     //报名结束时间
      startBegin:'',    //活动开始时间
      startEnd:'',      //活动结束时间
      describe_:'',      //活动规则描述
      activityNo:'',    //活动人数
      activityAddr:'',  //活动地址
      cost:'',          //活动金额

      hdProvince:'',  //省份
      hdCity:'',      //城市
      hdArea:'',      //区域
      hdLng:'',
      hdLat:'',
      token:'',       //用户登录凭证
    },
    pickerValue:'',    //活动时间开关
    startDate:new Date(),   //设置日期选择的初始日期——当前日期
    timeType:'',      //活动时间类型：报名时间、活动时间

    classifyValue:{id:'',classifyName:''},    //活动类型--总
    classifyVisible:false,
    classifySlots:[{
      flex: 1,
      values: [{id:'',classifyName:''}],
      className: 'slot1',
      textAlign: 'center'
    }]
  }),
  components: {
  },
  computed: {
    ...mapState({
      mapValue:state=>state.mapStore.mapVal,
      matchData:state=>state.mapStore.matchData,
    })
  },
  methods: {
    ...mapMutations(['setMatchData']),
    // 选择活动类型
    classify() {
      this.classifyVisible = true;
    },
    onClassifyChange(picker,values) {
      console.log(values);
      this.classifyValue = values[0];
      this.matchInfo.proType = values[0].id;
    },
    // 报名开始时间
    enrollBeginTime() {
      this.$refs.picker.open();
      this.timeType = '报名开始';
    },
    // 报名结束时间
    enrollEndTime() {
      this.$refs.picker.open();
      this.timeType = '报名结束';
    },
    // 活动开始时间
    startBeginTime() {
      this.$refs.picker.open();
      this.timeType = '活动开始';
    },
    // 活动结束时间
    startEndTime() {
      this.$refs.picker.open();
      this.timeType = '活动结束';
    },
    // 日期选择
    dateConfirm(value) {
      // console.log(value);   //国际时间戳
      let date = value;
      let _time = dateChangeTime(date)
      let timeType = this.timeType;
      switch (timeType) {
        case '报名开始':
          this.matchInfo.enrollBegin = _time;
          break;
        case '报名结束':
          this.matchInfo.enrollEnd = _time;
          break;
        case '活动开始':
          this.matchInfo.startBegin = _time;
          break;
        case '活动结束':
          this.matchInfo.startEnd = _time;
          break;
        default:

      }
    },
    // 跳转地图查询地址信息
    addressMap() {
      this.setMatchData(this.matchInfo);
      this.$router.push({name:'baiduMap'});
    },
    // 发布
    headerRightEvent(data) {
      let self = this;
      let matchParam = this.matchInfo;
      for(var key in matchParam) {
        if(matchParam[key]==''){
          console.log('不能为空');
          this.toast(key+'不能为空');
          return false;
          break;
        }
      }
      matchPush(matchParam).then(res=>{
        console.log(res);
        if(res.data.code==200){
          self.toast(res.data.msg);
          self.$router.go(-1);
        }
      })
    },
    // 图片地址拼接
    imgUrlLink(imgurl) {
      return this.$imgUrlLink(imgurl);
    },
    // 上传图片
    add_img(event){
        let reader =new FileReader();
        let img1=event.target.files[0];
        let type=img1.type;//文件的类型，判断是否是图片
        let size=img1.size;//文件的大小，判断图片的大小
        if(this.imgData.accept.indexOf(type) == -1){
            alert('请选择我们支持的图片格式！');
            return false;
        }
        if(size>3145728){
            alert('请选择3M以内的图片！');
            return false;
        }
        var uri = ''
        let form = new FormData();
        form.append('file',img1,img1.name);
        this.$ajax.post(configUrl.UPLOADFILES_URL,form,{
            headers:{'Content-Type':'multipart/form-data'}
        }).then(response => {
            console.log(response.data)
            uri = response.data.result
            reader.readAsDataURL(img1);
            var that=this;
            reader.onloadend=function(){
                that.matchInfo.themeIcon = uri;
            }
        }).catch(error => {
            alert('上传图片出错！');
        })
      },
  },
  mounted() {
    //do something after mounting vue instance
    let self = this;
    let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
    console.log(xlyd_loginInfo);
    self.matchInfo.token = xlyd_loginInfo.token;
    // 获取分类
    getClassifyList().then(res=>{
      console.log(res);
      if(res){
        self.classifySlots[0].values = res.data.result;
      }
    })
    this.$nextTick(()=>{
      let addrMessage = this.mapValue;
      if(this.matchData){
        this.matchInfo = this.matchData;    //表单数据
      }
      // hdProvince:'',  //省份
      // hdCity:'',      //城市
      // hdArea:'',      //区域
      // hdLng:'',
      // hdLat:'',
      if(addrMessage=='') {

      }else{
        this.matchInfo.activityAddr = addrMessage.address;    //活动地址
        this.matchInfo.hdProvince = addrMessage.addressComponents.province;   //省份
        this.matchInfo.hdCity = addrMessage.addressComponents.city;       //城市
        this.matchInfo.hdArea = addrMessage.addressComponents.district;       //区域
        this.matchInfo.hdLng = addrMessage.point.lng;   //
        this.matchInfo.hdLat = addrMessage.point.lat;   //
      }
    })
  },
}
</script>
<style lang="scss" scoped>
.acBackgrounImg{
  background-size: 20%;
  background-repeat: no-repeat;
  background-position: center;
  height: 160px;
  border-bottom: 1px solid $borderColor;
  position: relative;
  .uploadIpt{
    position: absolute;
    top: 0; left: 0;
    height: 100%; width: 100%;
    z-index: 2;
    opacity: 0;
  }
}

</style>
